<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		jieguoApi
	} from '/api/request.js';
	const props = defineProps({});
	const platform = ref({});
	onShow(async () => {
		platform.value = uni.getStorageSync('platform');
	});
	const opts = ref({
		legend: {
			show: false,
		},
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		xAxis: {
			fontSize: 15,
			marginTop: 10,
			gridType: 'dash',
			titleFontColor: '#999999'
		},
		yAxis: {
			gridType: 'dash',
			gridColor: '#CCCCCC',
			dashLength: 10,
			splitNumber: 5,
			data: [{
				axisLine: false, //坐标轴轴线是否显示
				axisLineColor: 'blue', //坐标轴轴线颜色
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				barBorderCircle: true,
			}
		}
	})
	const chartData = ref({
		categories: [],
		series: [{
			data: [{
					value: 35,
					color: "#EF4828"
				},
				{
					value: 36,
					color: "#FA6F01"
				},
				{
					value: 31,
					color: "#5BD145"
				},
				{
					value: 33,
					color: "#9561F3"
				},
				{
					value: 13,
					color: "#1890FF"
				}, // 备用颜色，自己定义
				{
					value: 34,
					color: "#91CB74"
				} // 备用颜色，自己定义
			]
		}]
	});
	const query = ref({})
	onLoad(async (e) => {
		console.log(e);
		let res = await jieguoApi({
			exam_id: e.id
		});
		query.value = res.data
		query.value.hao = e.haola
		console.log(res);
		console.log(query.value.eng_level);
		chartData.value.categories = query.value.eng_level.map((item) => {
			return item.name
		})
		const colors = ["#EF4828", "#FA6F01", "#5BD145", "#9561F3"];
		chartData.value.series[0].data = query.value.eng_level.map((item, index) => {
			return {
				value: item.words,
				color: colors[index % colors.length]
			};
		});
	});
	const goback = () => {
		uni.navigateBack();
	};
	const user = uni.getStorageSync('USER_TOKEN_INFOS')
	/**
	 * @param {number} number 数字
	 * @returns {array} 拆分后的数字数组
	 */
	const splitWords = (number) => {
		if (number < 10) {
			return [number];
		}

		return number
			.toString()
			.split('')
			.map((digit) => parseInt(digit, 10));
	}
	const zailai = () => {
		uni.redirectTo({
			url: '/pages/grammar/xunlian?id=' + query.value.hao
		})
	}
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 英语水平专业测试报告 </view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
		</view>
		<scroll-view scroll-y="true" :style="{
		height:platform.gaodu -platform.dingbu-96+'rpx'
	}" class="body">
			<view style="height: 36rpx;" />
			<view class="common-item top">
				<view class="title uni-row">
					<image src="/static/img/cihuiliang/hei.png" class="icon"></image>
					<view class="name">
						{{user.nickname}}，您好！你的词汇量为
					</view>
				</view>
				<view v-if="query.words < 10" class="uni-row danciliang">
					<view class="item-bg uni-row">
						{{ query.words }}
					</view>
				</view>
				<view v-else class="uni-row danciliang">
					<template v-for="(item, index) in splitWords(query.words)" :key="index">
						<view class="item-bg uni-row">
							{{ item }}
						</view>
					</template>
				</view>
				<view class="new-title">
					{{query.rule_param.name}}{{query.rule_param.level}}水平
				</view>
			</view>
			<view class="common-item echarts">
				<view class="title">
					各年级英语水平划分表
				</view>
				<qiun-data-charts :tooltipShow="false" type="column" :opts="opts" :chartData="chartData" />
			</view>
			<view class="common-item yuyan">
				<view class="title">
					测评结果柱状对比图
				</view>
				<view class="slider">
					<view class="name">
						高中高级水平
					</view>
					<view class="labels">
						{{query.eng_level[query.eng_level.length-1].words}}
					</view>
					<view class="wai topde">
						<view class="li" :style="{
							width:( query.eng_level[query.eng_level.length-2].words/ query.eng_level[query.eng_level.length-1].words*100)+'%'
						}">
						</view>
					</view>
				</view>
				<view class="slider">
					<view class="name">
						现掌握词汇量
					</view>
					<view class="labels">
						{{query.words}}
					</view>
					<view class="wai topdes">
						<view class="li" :style="{
						width:(query.words/ query.eng_level[query.eng_level.length-1].words*100)+'%'
					}">
						</view>
					</view>
				</view>
			</view>
			<view class="common-item yuyan">
				<view class="title">
					语言能力
				</view>
				<rich-text class="label" :nodes="query.rule_param.languageAbility"></rich-text>
			</view>
			<view class="common-item yuyan">
				<view class="title">
					测评分析
				</view>
				<rich-text class="label" :nodes="query.rule_param.evaluationAnalysis"></rich-text>
			</view>
			<view class="common-item yuyan">
				<view class="title">
					学习建议
				</view>
				<rich-text class="label" :nodes="query.rule_param.learningAdvice"></rich-text>
			</view>
			<view class="btn sss uni-row" @click="zailai">
				重新检测
			</view>
			<view class="btn ss uni-row" @click="goback">
				返回
			</view>
			<view style="height: 36rpx;" />
		</scroll-view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				padding: 40rpx 0 38rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			padding: 0 28rpx;

			.common-item {
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 32rpx;
				margin-bottom: 16rpx;

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 8rpx;
				}

				.title {
					padding: 38rpx 20rpx;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.danciliang {
				justify-content: center;
				padding: 0 29rpx 66rpx;
				border-bottom: 2rpx solid #F7F7F7;

				.item-bg {
					justify-content: center;
					background: url('/static/img/cihuiliang/item-bg.png');
					background-size: 100% 100%;
					width: 154rpx;
					height: 230rpx;
					font-weight: 500;
					font-size: 112rpx;
					color: #FFFFFF;
					margin: 0 7rpx;
				}
			}

			.new-title {
				text-align: center;
				font-weight: 500;
				font-size: 54rpx;
				color: #9561F3;
				padding: 16rpx 0 46rpx;
			}

			.echarts {
				text-align: center;
				padding: 0 20rpx 40rpx;
				padding-bottom: 40rpx;

				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					padding: 34rpx 0;
				}

				.image {
					width: 600rpx;
					height: 300rpx;
				}
			}

			.yuyan {
				padding: 30rpx 28rpx;

				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					padding: 0;
					text-align: center;
					margin-bottom: 28rpx;
				}

				.label {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}

				.slider {
					.name {
						font-size: 28rpx;
						color: #333333;
					}

					.labels {
						text-align: right;
						font-size: 20rpx;
						color: #333333;
						margin-top: 8rpx;
						margin-bottom: 6rpx;
					}

					.wai {
						height: 22rpx;
						border-radius: 20rpx;
						background-color: red;
						margin-bottom: 24rpx;

						.li {
							height: 22rpx;
							border-radius: 20rpx;
							background-color: red;
						}
					}

					.topde {
						background-color: #F4EEFF;

						.li {
							background-color: #9561F3;
						}
					}

					.topdes {
						background-color: #FFEFE2;

						.li {
							background-color: #FA6F01;
						}
					}
				}
			}

			.btn {
				justify-content: center;
				font-size: 32rpx;
				height: 88rpx;
				border-radius: 16rpx;
			}

			.sss {
				background: #9561F3;
				color: #fff;
				margin-bottom: 20rpx;
			}

			.ss {
				background: #E7DAFF;
				color: #9561F3;
			}

		}
	}
</style>